<script setup lang="ts">
import { Global } from '@/Global';
import { HttpHelper } from '@/lib/HttpHelper';
import { AuthService } from '@/apis/admin/auth';
import { User, Key, Postcard } from '@element-plus/icons-vue'
import { reactive, ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
const servicePath = "/Auth";
const router = useRouter();
const isLoading = ref(false);
const isBusy = ref(false);
const showGoogle = ref(false);
const data = reactive({
    name: "",
    password: "",
    googleCode: null,
    rememberMe: false,
});

onMounted(async () => {
    var localstr = localStorage.getItem("userinputRememberMe");
    if (localstr) {
        try {
            localstr = await HttpHelper.postForm(`${servicePath}/Decrypt`, { content: localstr });
        } catch (error) {
            localstr = null;
        }
    }
    
    if (localstr) {
        try {
            var obj = JSON.parse(localstr);
            for (var p in obj) {
                (<any>data)[p] = obj[p];
            }
        } catch (error) {

        }
    }

    isLoading.value = true;
    try {
        var obj = await HttpHelper.get(`${servicePath}/GetLogoTitle`, null);
        if (obj) {
            Global.Title = JSON.parse(obj);
        }
        document.title = Global.Title.System;
    } catch (error) {
        Global.showError(error);
    }
    finally {
        isLoading.value = false;
    }
});

watch(() => data.name, async (newValue: any) => {
    try {
        var value = await HttpHelper.get(`${servicePath}/IsUseGoogleAuthenticator`, { username: data.name });
        if (value == "1") {
            showGoogle.value = true;
        }
        else
            showGoogle.value = false;
    } catch (error) {
        Global.showError(error);
    }
});

const onSubmit = async () => {
    isBusy.value = true;
    try {
        var user = await AuthService.Login(data.name, data.password, data.googleCode);
        var tokenObj = JSON.parse(user.Password);

        data.googleCode = null;
        Global.UserInfo.Token = "Bearer " + tokenObj.token;
        Global.UserInfo.Name = user.Name;
        if (user.Type == 65792)
            Global.UserInfo.Role = "超级管理员";
        else if (user.Type == 256)
            Global.UserInfo.Role = "管理员";
        else
            Global.UserInfo.Role = user.Role;

        console.log(Global.UserInfo.Token);

        if (data.rememberMe) {
            try {
                var value = await HttpHelper.postForm(`${servicePath}/Encrypt`, { content: JSON.stringify(data) });
                localStorage.setItem("userinputRememberMe", value);
            } catch (error) {

            }
        }

        localStorage.setItem("userinfo", JSON.stringify(Global.UserInfo));
        router.push("/");
    }
    catch (e) {
        Global.showError(e);
    }
    finally {
        isBusy.value = false;
    }
}
</script>

<template>
    <el-container class="main" v-loading="isLoading">
        <div class="panel">
            <div class="top">
                <div class="icon">
                    {{ Global.Title.Login }}
                </div>
                <div class="title">
                    Backend Management System
                </div>
            </div>
            <div class="content">
                <el-form :model="data" @keypress.native.enter.prevent="onSubmit">
                    <el-form-item>
                        <el-input v-model="data.name" :prefix-icon="User" placeholder="用户名" />
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="data.password" type="password" show-password :prefix-icon="Key"
                            placeholder="密码" />
                    </el-form-item>
                    <el-form-item v-if="showGoogle">
                        <el-input v-model="data.googleCode" :prefix-icon="Postcard" placeholder="谷歌验证码" />
                    </el-form-item>
                    <el-form-item>
                        <el-checkbox v-model="data.rememberMe">
                            记住密码
                        </el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="isBusy" type="primary" @click="onSubmit">登 录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </el-container>
</template>

<style scoped lang="scss">
.main {
    background-color: var(--main-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.panel {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    width: 358px;

    .top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px 0 40px 0;
        border-bottom: 1px solid #ddd;

        .icon {
            border-radius: 4px;
            width: 100px;
            height: 100px;
            background-image: linear-gradient(to bottom, #7d3e80, #3a9afd);
            color: #fff;
            font-size: 18px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .title {
            font-weight: normal;
            color: #76757B;
            font-size: 15px;
            padding-top: 15px;
        }
    }

    .content {
        flex: 1;
        min-height: 0px;
        padding: 40px;
    }


}

.el-input {
    height: 40px;
}

.el-button {
    width: 100%;
    height: 42px;
    font-size: 14px;
    font-weight: 600;
}
</style>